import React from "react";
import Helmet from "react-helmet";
import { Link, withPrefix } from "gatsby-link";
import "../assets/sass/main.scss";
import NavHeader from "../components/NavHeader";
import Nav from "../components/Nav";
import Header from "../components/Header";
import Menu from "../components/Menu";
import Footer from "../components/Footer";
import bg01 from "../assets/images/bg01.jpg";
import styles from "../assets/sass/pages/login/main.scss";
class Template extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMenuVisible: false,
      loading: "is-loading",
      navSize: -1,
      settings: {
        visible: ["visible top", "", ""],
        top: ["", "", ""],
        delay: 6000
      }
    };
  }
  componentDidMount() {
    this.timeoutId = setTimeout(() => {
      this.setState({ loading: "" });
    }, 100);
    this.bgHander();
  }
  bgHander() {
    var settings = {
      delay: 6000
    };
    let pos = 0;
    let lastPos = 0;
    let $bgs = [];
    const $bg1 = document.getElementById("bg1");
    const $bg2 = document.getElementById("bg2");
    const $bg3 = document.getElementById("bg3");
    window.canUse = function(p) {
      if (!window._canUse) window._canUse = document.createElement("div");
      var e = window._canUse.style,
        up = p.charAt(0).toUpperCase() + p.slice(1);
      return (
        p in e ||
        "Moz" + up in e ||
        "Webkit" + up in e ||
        "O" + up in e ||
        "ms" + up in e
      );
    };
    $bgs.push($bg1);
    $bgs.push($bg2);
    $bgs.push($bg3);
    $bgs[pos].classList.add("visible");
    $bgs[pos].classList.add("top");

    // Bail if we only have a single BG or the client doesn't support transitions.
    if ($bgs.length == 1 || !canUse("transition")) return;
    window.setInterval(function() {
      lastPos = pos;
      pos++;
      // Wrap to beginning if necessary.
      if (pos >= $bgs.length) pos = 0;
      // Swap top images.
      $bgs[lastPos].classList.remove("top");
      $bgs[pos].classList.add("visible");
      $bgs[pos].classList.add("top");

      // Hide last image after a short delay.
      window.setTimeout(function() {
        $bgs[lastPos].classList.remove("visible");
      }, settings.delay / 2);
    }, settings.delay);
  }
  componentWillUnmount() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    if (this.bgTimeoutId) {
      clearTimeout(this.bgTimeoutId);
    }
  }

  render() {
    const { children } = this.props;
    const bgStyles = {
      backgroundPosition: `center center`
    };
    return (
      <div id="login">
        <Helmet>
          <title>Eventually by HTML5 UP</title>
          <meta charset="utf-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, user-scalable=no"
          />
        </Helmet>
        <header id="login-header">
          <h1>Eventually</h1>
          <p>
            A simple template for telling the world when you'll launch<br />
            your next big thing. Brought to you by{" "}
            <a href="http://html5up.net">HTML5 UP</a>.
          </p>
        </header>
        {children()}
        <footer id="login-footer">
          <ul className="icons">
            <li>
              <a href="#" className="icon fa-twitter">
                <span className="label">Twitter</span>
              </a>
            </li>
            <li>
              <a href="#" className="icon fa-instagram">
                <span className="label">Instagram</span>
              </a>
            </li>
            <li>
              <a href="#" className="icon fa-github">
                <span className="label">GitHub</span>
              </a>
            </li>
            <li>
              <a href="#" className="icon fa-envelope-o">
                <span className="label">Email</span>
              </a>
            </li>
          </ul>
          <ul className="copyright">
            <li>&copy; Untitled.</li>
            <li>
              Credits: <a href="http://html5up.net">HTML5 UP</a>
            </li>
          </ul>
        </footer>
        <div id="login-bg">
          <div
            id="bg1"
            style={{
              ...bgStyles,
              background: `url(${require("../assets/images/bg01.jpg")})`
            }}
          />
          <div
            id="bg2"
            style={{
              ...bgStyles,
              background: `url(${require("../assets/images/bg02.jpg")})`
            }}
          />
          <div
            id="bg3"
            style={{
              ...bgStyles,
              background: `url(${require("../assets/images/bg03.jpg")})`
            }}
          />
        </div>
      </div>
    );
  }
}

Template.propTypes = {
  children: React.PropTypes.func
};

export default Template;
